import React from 'react';
//ReactDom渲染实际DOM,VDOM->DOM
import ReactDOM from 'react-dom';
// import './index.css';
import styles from './index.module.css';//模块化
import App from './App';
import * as serviceWorker from './serviceWorker';
import logo from './logo.svg'
import store from './store/'
import {Provider} from 'react-redux'

// JSX语法
// const jsx = <div>hello</div>

// 基本使用,表达式用{}包裹
// const name = 'React'
// const jsx = <div>hello,{name}</div>

//函数
const obj = {
  firstName:'Harry',
  lastName:'Potter'
}

function formatName(name){
  return name.firstName + ' ' + name.lastName
}
//JSX对象
const greet = <div>good</div>
//条件语句
const show = true;
//数组
const a = [0,1,2]
const jsx = (
  <div className={styles.app}>
    <div>{formatName(obj)}</div>
    {greet}
    {show?greet:'登录'}
    {show && greet}
    <ul>
      {/*diff,首先比较type，然后是key,所以统计同类型元素,key值必须得唯一*/}
       {a.map(item=>(
       <li key={item}>{item}</li>
       ))}
    </ul>
    {/* 属性 */}
    <img 
    src={logo} 
    // className="logo" 
    className={styles.logo}
    style={{width:'50px',height:'50px'}}>
    </img>
  </div>
);


// ReactDOM.render(
//   jsx,
//   document.getElementById('root')
// );
ReactDOM.render(
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>,
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// store.subscribe(()=>{
//   ReactDOM.render(
//     <React.StrictMode>
//       <App />
//     </React.StrictMode>,
//     document.getElementById('root')
//   );
// })
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
